<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../js/w_index_josn.js"></script>
    <script src="../Resources/card/jquery-3.6.0.js"></script>
    <link rel="stylesheet" href="../css/w_index.css" />
    <link rel="stylesheet" href="../css/minireset.min.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>
    <link
      rel="stylesheet"
      href="../Resources/card/swiper/swiper-bundle.min.css"
    />
    <script src="../Resources/card/swiper/swiper-bundle.min.js"></script>
    <script src="../js/w_index.js"></script>
  </head>
  <body>
    <main>
      <nav>
        <ul>
          <span></span>
          <a href="Login.html"><li >社区</li></a> 
          <a href="q-peijian.html"><li >商城</li> </a>
          <a href="./fuwu.html"><li >服务</li>   </a>
          <a href="flme.html"><li >Flyme</li>   </a>
          <a href="Login.html"><li >App下载</li>   </a>
        </ul>
        <input class="input" placeholder="请输入关键词搜索" />
        <div class="right">
          <div class="zhuti"><span></span></div>
          <div><a href="./Login.html">签到</a></div>
          <div class="fabu"><a href="./Login.html">发布</a></div>
          <div class="touxiang"></div>
        </div>
      </nav>
      <!-- nav 结束 -->
      <div class="head">
        <p class="tite">星纪魅族 热爱无线</p>
        <div class="cent">
          <p class="tite_chent">热门话题</p>
          <ul>
            <li>
              <img
                src="https://ssm.res.meizu.com/admin/2023/03/08/1780834568/hXN2VBz0mI.jpeg!applist1080.webp"
                alt=""
              />
              <div class="mubu">
                <div class="tite2">魅族20</div>
                <div class="text">
                  <span>主题:1391</span><span>关注:1391</span>
                </div>
              </div>
            </li>
            <li>
              <div class="mubu">
                <div class="tite2">星际魅族</div>
                <div class="text">
                  <span>主题:291</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">FLyem10</div>
                <div class="text">
                  <span>主题:191</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">无解之美</div>
                <div class="text">
                  <span>主题:451</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">我有一个朋友</div>
                <div class="text">
                  <span>主题:791</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">摄影天地</div>
                <div class="text">
                  <span>主题:131</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">商城福利</div>
                <div class="text">
                  <span>主题:191</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">校园艰涩</div>
                <div class="text">
                  <span>主题:391</span>
                </div>
              </div>
            </li>
            <li>
              <img src="" alt="" />
              <div class="mubu">
                <div class="tite2">FIDU</div>
                <div class="text">
                  <span>主题:391</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </main>
    <div class="center">
      <div
        class="swiper mySwiper swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden"
      >
        <div
          class="swiper-wrapper"
          id="swiper-wrapper-572b42e5f1596574"
          aria-live="polite"
          style="
            transition-duration: 0ms;
            transform: translate3d(-500.67px, 0px, 0px);
          "
        >
          <div
            class="swiper-slide"
            role="group"
            aria-label="1 / 3"
            style="
              width: 297.667px;
              margin-right: 30px;
              background-image: url('https://ssm.res.meizu.com/admin/2023/03/10/1313404371/oIQ51x1PNy.jpeg');
            "
          ></div>
          <div
            class="swiper-slide"
            role="group"
            aria-label="2 / 3"
            style="
              width: 297.667px;
              margin-right: 30px;
              background-image: url('https://ssm.res.meizu.com/admin/2023/03/10/1313404371/ri1yABpSDf.jpeg');
            "
          ></div>
          <div
            class="swiper-slide"
            role="group"
            aria-label="3 / 3"
            style="
              width: 297.667px;
              margin-right: 30px;
              background-image: url('https://ssm.res.meizu.com/admin/2023/03/06/1313404371/rD1p5Aeexh.jpg');
            "
          ></div>
        </div>
        <div
          class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"
        >
          <span
            class="swiper-pagination-bullet"
            tabindex="0"
            role="button"
            aria-label="Go to slide 1"
          ></span
          ><span
            class="swiper-pagination-bullet"
            tabindex="0"
            role="button"
            aria-label="Go to slide 2"
          ></span
          ><span
            class="swiper-pagination-bullet"
            tabindex="0"
            role="button"
            aria-label="Go to slide 3"
          ></span>
        </div>
        <span
          class="swiper-notification"
          aria-live="assertive"
          aria-atomic="true"
        ></span>
      </div>
      <!-- 轮播结束------------------------------- -->

      <div class="quanzhi">
        <p><span>圈子</span><span class="gengduo">更多</span></p>
        <ul class="q_center">
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/26/1321171803/SCi3Ca4FDl.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅族手机</div>
              <div>主题:1.8万 圈友:1.4万</div>
              <div>今日主题:4</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/18/1780834568/8U3Vc72Aa3.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅族商城</div>
              <div>主题:1.8万 圈友:1.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2023/03/08/1780834568/O2UAoKaKXf.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>FLYNE</div>
              <div>主题:1.8万 圈友:1.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/11/11/1780834568/J08q9yCmCy.jpeg!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>我有一个朋友</div>
              <div>主题:1.8万 圈友:41.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/12/15/1780834568/cxi5AduNor.jpeg!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>综合讨论</div>
              <div>主题:1.8万 圈友:14.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/26/1321171803/PWouF93RAE.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅游记</div>
              <div>主题:1.58万 圈友:1.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/12/05/1641437005/FvSJzMgaJ2.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>PAif</div>
              <div>主题:8万 圈友:1.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/18/1780834568/xfMvystede.jpg!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅族手机</div>
              <div>主题:1万 圈友:4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/18/1780834568/wVwaXONoyJ.jpg!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅族校园</div>
              <div>主题:1.78万 圈友:11.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
          <li>
            <div class="left">
              <img
                src="https://ssm.res.meizu.com/admin/2022/10/26/1321171803/SCi3Ca4FDl.png!applist1080.webp"
                alt=""
              />
            </div>
            <div class="right">
              <div>魅族渲染</div>
              <div>主题:1.8万 圈友:1.4万</div>
              <div>今日主题:0</div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 圈子结束------------------------------ -->
      <div class="renqi">
        <p>今日人气用户</p>
        <div class="swp">
          <div
            class="swiper mySwiper2 swiper-initialized swiper-horizontal swiper-pointer-events swiper-backface-hidden"
          >
            <div
              class="swiper-wrapper"
              id="swiper-wrapper-c7f5a33330247a86"
              aria-live="polite"
            >
              <div
                class="swiper-slide swiper-slide-active"
                role="group"
                aria-label="1 / 9"
                style="width: 395px; margin-right: 30px"
              ></div>
              <div
                class="swiper-slide swiper-slide-next"
                role="group"
                aria-label="2 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 2
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="3 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 3
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="4 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 4
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="5 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 5
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="6 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 6
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="7 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 7
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="8 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 8
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="9 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 9
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="9 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 9
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="9 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 9
              </div>
              <div
                class="swiper-slide"
                role="group"
                aria-label="9 / 9"
                style="width: 395px; margin-right: 30px"
              >
                Slide 9
              </div>
            </div>
           
              <span
                class="swiper-pagination-bullet swiper-pagination-bullet-active"
                tabindex="0"
                role="button"
                aria-label="Go to slide 1"
                aria-current="true"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 2"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 3"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 4"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 5"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 6"
              ></span
              ><span
                class="swiper-pagination-bullet"
                tabindex="0"
                role="button"
                aria-label="Go to slide 7"
              ></span>
            </div>
            <span
              class="swiper-notification"
              aria-live="assertive"
              aria-atomic="true"
            ></span>
          </div>
        </div>
      </div>  
      <div class="buding"></div>
      <div class="fenlei">
         <div class="fen_c">
          <div class="at">精选</div>
          <div>此刻</div>
          <div>热门</div>
        </div>
      </div>
      <div class="cont">
        <ul class="tiezi">
          <li>
            <div  class="yonghu">
              <div class="touxiang1"></div>
              <div class="urse">
                <div class="name">
                  <span>卓越</span><span>meizu</span>
                </div>
                <div class="chenghao">魅族社区大当家</div>
              </div>
              <div class="gaunzhu">关注</div>
            </div>
            <div class="biaoti">
              <h2>魅族 20,遇见你真好</h2>
              <p>魅友你好感谢 20 年来的热爱一路陪伴魅族共同成长扫码查看你与魅族共度的时光之旅分享即可获得社区「魅族 20</p>
            </div>
            <div class="tupian">
              <img style="width: 200px;height: 400px;" src="https://ssm.res.meizu.com/content/2023/03/14/1304289/OOumcLWMbj.png!applist1080.webp" alt="">
            </div>
            <div class="huati">
             <div>中和讨论</div>
             <div>魅族20周年</div>
            </div>
            <div class="bankuaixinxi">
              5小时前 ·  来自广东 · 浏览5111

            </div>
            <div class="pinglun">
              <div class="use">
                <div class="use_touxiang">
                </div>
                <span>mumu先生:</span>
                <span class="neirong">我榜大俗赛一下</span>
              </div>
              <div class="use">
                <div class="use_touxiang">
                </div>
                <span>mumu先生:</span>
                <span class="neirong">我榜大俗赛一下</span>
              </div>
            </div>
            
            <div class="sanlian">
             <div>614 <span ></span></div>
             <div>405<span ></span></div>
             <div>20<span ></span></div>
            
            </div>



          </li>
          
         
        </ul>
      </div>
    </div>
  </body>
  <script>
    var swiper = new Swiper(".mySwiper", {
      slidesPerView: 1.8,
      centeredSlides: true,
      spaceBetween: 30,
      loop: true,
      autoplay: true,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      on: {
        slideChangeTransitionEnd: function () {
          console.log(this.activeIndex); //切换结束时，告诉我现在是第几个slide
        },
      },
      // navigation: {
      //   nextEl: ".swiper-button-next",
      //   prevEl: ".swiper-button-prev",
      // },
      //----------------
    });
    var swiper = new Swiper(".swp .mySwiper2", {
      slidesPerView: 8,
      spaceBetween: 10,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    });
    
   
  </script>
</html>
